<template>
  <div class="head">
    <nut-swiper :init-page="2" :auto-play="3000" pagination-visible pagination-color="#426543"
      pagination-unselected-color="#808080">
      <nut-swiper-item v-for="(item, index) in list" :key="index" style="height: 150px">
        <img :src="item" alt="" style="height: 100%; width: 100%" draggable="false" />
      </nut-swiper-item>
    </nut-swiper>
  </div>

  <nut-row>
    <nut-col :span="24" v-if="menus.length">
      <view v-for="(item, index) in menus" :key="index" class="content-box">
        <nut-card :img-url="item.dishesPicture" :title="item.dishesName" price="0" vipPrice="0"
          :shopDesc="item.dishesDescribe" shopName="王家食堂">
          <template #footer>
            <!-- <web-view :src="item.dishesUrl" style="width: 100%; height: 100px;">详细教学</web-view> -->
            <nut-cell title="详细教学" @click="detailedTeaching(item)" class="nutCell_1" v-if="item.dishesUrl"></nut-cell>
            <nut-cell title="删除" @click="baseClick(item)" class="nutCell_2"></nut-cell>
          </template>
        </nut-card>
      </view>
      <nut-dialog title="确认删除吗？" v-model:visible="visible" @cancel="onCancel" @ok="delMenuToCart" />
      <nut-dialog title="观看视频" v-model:visible="visible_3" class="my-dialog">
        <Video style="width: 350px;" v-if="visible_3" id="video" :src="menu_item.dishesUrl"
          :poster="menu_item.dishesPicture"
          initial-time="0" :controls="true" :autoplay="true" :loop="false" :muted="false" :enableAutoRotation="true"/>
      </nut-dialog>
    </nut-col>
  </nut-row>

  <nut-fixed-nav v-model:visible="visible_2" :position="{ top: '450px' }" type="right">
    <template #list>
      <ul class="nut-fixed-nav__list" style="background-color: #e89898;">
        <li class="nut-fixed-nav__list-item" @click="saveHis" style="width: 70px; color: #fff;">保存记录</li>
      </ul>
    </template>
    <template #btn>
      <Retweet color="#fff" />
      <span class="text">{{ visible_2 ? '关闭' : '打开' }}</span>
    </template>
  </nut-fixed-nav>
</template>

<script setup>
  import { ref } from 'vue'
  import { Video } from "@tarojs/components";
  import { Retweet } from '@nutui/icons-vue-taro'
  import Taro, { useDidShow } from '@tarojs/taro'
  import { delShoppingCart, shoppingCart, saveToMy } from '../../api/index';
  import head_1 from '../../img/head/head_1.jpg'
  import head_2 from '../../img/head/head_2.jpg'
  import head_3 from '../../img/head/head_3.jpg'
  import head_4 from '../../img/head/head_4.jpg'
  import head_5 from '../../img/head/head_5.jpg'
  // 轮播图
  const list = ref([head_1, head_2, head_3, head_4, head_5])
  // 已点单品列表
  const menus = ref([]);
  // 已点数量
  const count = ref(0);
  const visible = ref(false);
  const visible_2 = ref(false)
  const visible_3 = ref(false);
  const menu_item = ref(null);
  const currentData = ref(null);
  // 组件创建时获取导航数据
  useDidShow(() => {
    getshoppingCart()
  })

  // 查询已点
  const getshoppingCart = async () => {
    console.log('查询已点');
    shoppingCart({ orderFlag: 0 }).then(res => {
      if (res.data.code === 200) {
        console.log("查询已点",res.data.data);
        menus.value = res.data.data;
        count.value = res.data.data.length;
        Taro.setTabBarBadge({
          index: 1, // tabBar的哪一项，从0开始
          text: count.value + '' // 显示的文本，超过 99 显示成 “…”
        })
      }
    })
  };
  const baseClick = (item) => {
    visible.value = true;
    currentData.value = item.id;
  };
  const onCancel = () => {
    console.log('event cancel');
  };
  // 删除购物车菜品
  const delMenuToCart = () => {
    console.log('删除购物车菜品', currentData.value);
    delShoppingCart({ id: currentData.value }).then(res => {
      if (res.data.code === 200) {
        Taro.showToast({ title: res.data.msg, icon: 'success' })
        // 重新查询已点
        console.log('重新查询已点');
        getshoppingCart()
      } else {
        Taro.showToast({ title: res.data.msg, icon: 'none' })
      }
    })
  };
  // 详细教学
  const detailedTeaching = (item) => {
    console.log('详细教学', item);
    menu_item.value = item;
    visible_3.value = true;

  };
  // 根据已点数据保存历史
  const saveHis = () => {
    console.log('保存历史');
    saveToMy().then(res => {
      if (res.data.code === 200) {
        visible_2.value = false;
        Taro.switchTab({ url: '/pages/my/my' })
      } else {
        Taro.showToast({ title: res.data.msg, icon: 'none' })
      }
    })

  };
</script>

<style>
  page {
    --nut-dialog-width: 800px;
  }
  .content-box {
    padding: 0 10px 0 15px;
    margin-bottom: 15px;
  }

  .nutCell_1 {
    width: 170rpx;
    /* background-color: MediumSeaGreen; */
    color: rgb(221, 129, 71);
  }

  .nutCell_2 {
    width: 120rpx;
    /* margin-left: 100px; */
    /* background-color: Tomato; */
    color: Tomato;
  }

  .foot {
    position: fixed;
    width: 100%;
    top: 850rpx;
    margin-top: 220rpx;
    background-color: #e8989860;
    /* 红色背景，50% 透明度 */
  }

  .my-dialog {
  width: 500px; /* 设置宽度 */
  height: 200px; /* 设置高度 */
}
</style>